<template>
  <DaprPlusTable
    :table-title="$t('daprplus.auth.organization.list')"
    :entity="entity"
    :grid-options="gridOptions"
    :query-api="crudApi.getPage"
    :create-api="crudApi.create"
    :update-api="crudApi.update"
    :delete-api="crudApi.delete"
    :default-new-record="createDefaultOrganization"
    @update:grid-api="onGridApiUpdate"
  >
    <template #extra-tools>
      <Button class="mr-2" @click="expandAll">
        <template #icon><DownOutlined /></template>
        {{ $t('daprplus.expand') }}
      </Button>
      <Button @click="collapseAll">
        <template #icon><UpOutlined /></template>
        {{ $t('daprplus.collapse') }}
      </Button>
    </template>
    <template #action="{ row }">
      <Button type="link" @click="createChildNode(row)">
        {{ $t('daprplus.addsubnode') }}
      </Button>
    </template>
  </DaprPlusTable>
</template>

<script lang="ts" setup>
import type { ExtendedVxeGridApi, VxeGridProps } from '#/adapter/vxe-table';
import { DaprPlusTable } from '#/components/daprplus';
import { Button } from 'ant-design-vue';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { createCrudApi } from '#/api/daprplus';
import type { IOutDto, IInDto, EntityInfo } from '#/utils/daprplus';
import { createBooleanColumn } from '#/utils/daprplus';
import { $t } from '#/locales';

const baseUrl = '/identity/api/organization';
const crudApi = createCrudApi<OrganizationInDto, OrganizationOutDto>(baseUrl);

const entity: EntityInfo = {
  code: 'Organization',
  display: $t('daprplus.auth.organization.title'),
};

// 验证规则
const validRules = {
  name: [
    { required: true, message: '组织机构名称不能为空' },
    { min: 2, max: 50, message: '组织机构名称长度应在2-50个字符之间' },
  ],
  code: [
    { required: true, message: '组织机构代码不能为空' },
    { min: 2, max: 50, message: '组织机构代码长度应在2-50个字符之间' },
  ],
  remark: [{ max: 200, message: '备注长度应在2-200个字符之间' }],
};

// 扩展配置
const gridOptions: VxeGridProps<OrganizationOutDto> = {
  editRules: validRules,
  columns: [
    { type: 'checkbox', width: 40 },
    {
      field: 'id',
      title: '编号',
      sortable: true,
      width: 130,
    },
    {
      field: 'name',
      title: '组织机构名称',
      sortable: true,
      align: 'left',
      minWidth: 200,
      treeNode: true,
      editRender: { name: 'input' },
    },
    {
      field: 'code',
      title: '组织机构代码',
      sortable: true,
      align: 'left',
      width: 200,
      editRender: { name: 'input' },
    },
    {
      field: 'remark',
      title: '备注说明',
      align: 'left',
      minWidth: 300,
      editRender: { name: 'input' },
    },
    createBooleanColumn('isLocked', '已锁定'),
    {
      field: 'createdTime',
      title: '创建时间',
      formatter: 'formatDateTime',
      width: 140,
    },
    {
      title: '操作',
      width: 120,
      slots: { default: 'action' },
    },
  ],
  checkboxConfig: {
    isShiftKey: false,
  },
  treeConfig: {
    transform: true,
    rowField: 'id',
    parentField: 'parentId',
  },
  expandConfig: {
    expandAll: true,
    reserve: true,
  },
};

let gridApi: ExtendedVxeGridApi;

function onGridApiUpdate(api: ExtendedVxeGridApi) {
  gridApi = api;
}

function createDefaultOrganization(): OrganizationInDto {
  return {
    id: '0',
    name: '新组织机构001',
    code: 'ORG001',
    remark: '新组织机构001备注',
    parentId: undefined,
    isLocked: false,
  };
}

function createChildNode(parentNode: OrganizationOutDto) {
  const newRecord = {
    id: '0',
    name: `${parentNode.name}-子节点`,
    code: `${parentNode.code}-001`,
    remark: `${parentNode.name}的子节点`,
    parentId: parentNode.id,
    isLocked: false,
  };
  gridApi.grid.insertAt(newRecord, -1);
  gridApi.grid.setEditRow(newRecord);
}

const expandAll = () => {
  gridApi.grid.setAllTreeExpand(true);
};

const collapseAll = () => {
  gridApi.grid.setAllTreeExpand(false);
};

export interface OrganizationOutDto extends IOutDto {
  name?: string;
  code?: string;
  remark?: string;
  parentId?: string;
  isLocked?: boolean;
  createdTime?: Date;
}

export interface OrganizationInDto extends IInDto {
  name: string;
  code: string;
  remark?: string;
  parentId?: string;
  isLocked: boolean;
}
</script>

<style scoped></style>
